<template>
    <div>
        <div class="contain">
            <div class="left">
                <div class="clue">
                    <div class="clue-title">
                        <h3>{{ clueList.name }}/{{ clueList.clueId }}</h3>
                    </div>
                    <div class="clue-cont">
                        <div class="clue-content">
                            <text class="title">线索创建时间</text>
                            <text class="info">{{ formdata.formDate(clueList.createTime) }}</text>
                        </div>
                        <div class="clue-content">
                            <text class="title">客户手机号码</text>
                            <text class="info">{{ clueList.phone }}</text>
                        </div>
                        <div class="clue-content">
                            <text class="title">渠道来源</text>
                            <text class="info">{{ clueList.channelName }}</text>
                        </div>
                        <div class="clue-content">
                            <text class="title">线索分配者</text>
                            <text class="info">{{ clueList.allocator }}</text>
                        </div>
                        <div class="clue-content">
                            <text class="title">线索归属时间</text>
                            <text class="info">{{ formdata.formDate(clueList.belongTime) }}</text>
                        </div>
                        <div class="clue-content">
                            <text class="title">线索归属人</text>
                            <text class="info">{{ clueList.owner }}</text>
                        </div>
                        <div class="clue-content">
                            <text class="title">所属促销活动信息</text>
                            <text class="info">{{ clueList.activityName }}/{{ clueList.activityInfo }}</text>
                        </div>
                        <div class="btn">
                            <el-button
                                type="danger"
                                :disabled="route.query.status == 'view'"
                                @click="handleVoid"
                                >无效线索</el-button
                            >
                            <el-button
                                type="primary"
                                :disabled="route.query.status == 'view'"
                                @click="handleShop"
                                >转为商机</el-button
                            >
                        </div>
                    </div>
                </div>
                <div class="clue-follow">
                    <div class="clue-title">
                        <h3>线索跟进</h3>
                    </div>
                    <div class="clue-cont">
                        <div class="clue-content">
                            <label class="title">客户姓名</label>
                            <el-input
                                type="text"
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.name"
                            />
                        </div>
                        <div class="clue-content">
                            <label class="title">性别</label>
                            <el-select v-model="clueList.gender" :disabled="route.query.status == 'view'">
                                <el-option
                                    v-for="item in genderList"
                                    :key="item.dictValue"
                                    :label="item.dictLabel"
                                    :value="Number(item.dictValue)"
                                >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="clue-content">
                            <label class="title">年龄</label>
                            <el-input-number
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.age"
                                :min="0"
                            />
                        </div>
                        <div class="clue-content">
                            <label class="title">客户微信号码</label>
                            <el-input
                                type="text"
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.weixin"
                            />
                        </div>
                        <div class="clue-content">
                            <label class="title">客户QQ号码</label>
                            <el-input
                                type="text"
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.qq"
                            />
                        </div>
                        <div class="clue-content">
                            <label class="title">客户手机号码</label>
                            <el-input
                                type="text"
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.phone"
                            />
                        </div>
                        <div class="clue-content" style="width: 100%">
                            <label class="title">客户意向等级</label>
                            <el-radio-group :disabled="route.query.status == 'view'" v-model="clueList.level">
                                <el-radio
                                    v-for="item in levelList"
                                    :key="item.dictValue"
                                    :label="Number(item.dictValue)"
                                    >{{ item.dictLabel }}</el-radio
                                >
                            </el-radio-group>
                        </div>
                        <div class="clue-content" style="width: 100%">
                            <label class="title">客户意向类型</label>
                            <el-radio-group
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.subject"
                            >
                                <el-radio
                                    v-for="item in subjectList"
                                    :key="item.dictValue"
                                    :label="Number(item.dictValue)"
                                    >{{ item.dictLabel }}</el-radio
                                >
                            </el-radio-group>
                        </div>
                        <div class="clue-content" style="width: 100%">
                            <label class="title">跟进记录</label>
                            <el-input
                                :disabled="route.query.status == 'view'"
                                v-model="clueList.record"
                                type="textarea"
                                placeholder="请输入内容"
                            />
                        </div>
                        <div class="clue-content" style="width: 100%">
                            <label class="title">下次跟进时间</label>
                            <el-date-picker
                                :disabled="route.query.status == 'view'"
                                type="datetime"
                                placeholder="选择日期"
                                v-model="clueList.nextTime"
                            />
                        </div>
                        <div class="btn">
                            <el-button
                                type="primary"
                                :disabled="route.query.status == 'view'"
                                @click="handleSubmit"
                                >提交</el-button
                            >
                            <el-button @click="handleCancel">返回</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <h3>线索跟进记录</h3>
                </div>
                <div v-for="(item, index) in recordList" :key="index" class="record">
                    <div class="record-content">
                        <text
                            ><span class="title">{{ item.createBy }}：</span>{{ item.info }}</text
                        >
                    </div>
                    <p>{{ formdata.formDate(item.createTime) }}</p>
                </div>
            </div>
            <el-dialog v-model="dialogFormVisible" title="无效线索" width="500">
                <div>
                    <el-form :model="form" :rules="rules" ref="formListRef">
                        <div class="void-reason">
                            <el-form-item label="原因" prop="reason">
                                <el-select v-model="form.reason" placeholder="请选择原因" style="width: 90%">
                                    <el-option
                                        v-for="item in voidStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.label"
                                    />
                                </el-select>
                            </el-form-item>
                        </div>

                        <div class="void-remark">
                            <el-form-item label="备注" prop="remark">
                                <el-input
                                    type="textarea"
                                    rows="4"
                                    style="width: 400px"
                                    placeholder="请输入内容"
                                    v-model="form.remark"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <div class="void-btn">
                    <el-button type="primary" @click="handleVoidConfirm(formListRef)">确定</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import {
    getClueDetail,
    getClueFollow,
    getClueRecord,
    getClueVoid,
    getClueVoidStatus,
    getShop,
    getLevel,
    getSex,
    getSubject,
} from '@/api/tienchin/clue';
import { useRoute } from 'vue-router';
import { formdata } from '@/api/format';
import useTagsViewStore from '@/store/modules/tagsView';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const dialogFormVisible = ref(false);
const clueList = ref([]);
const recordList = ref([]);
const formListRef = ref<FormInstance>();
const form = ref<FormRules>({
    reason: '',
    remark: '',
});

const rules = {
    reason: [{ required: true, message: '请选择原因', trigger: 'change' }],
};
// const id = ref('');
function getDetail() {
    getClueDetail(route.query.id).then(res => {
        console.log(res);
        clueList.value = res.data;
    });

    getSex().then(res => {
        console.log(res.data);
        genderList.value = res.data;
        console.log(genderList.value);
    });

    getLevel().then(res => {
        console.log(res.data);
        levelList.value = res.data;
        console.log(levelList.value);
    });

    getSubject().then(res => {
        console.log(res.data);
        subjectList.value = res.data;
        console.log(subjectList.value);
    });
}
function getRecord() {
    getClueRecord(route.query.id).then(res => {
        console.log(res);
        recordList.value = res.data;
        console.log(recordList.value);
    });
}
const genderList = ref([]);
const levelList = ref([]);
const subjectList = ref([]);
const voidStatus = ref([]);

const handleShop = () => {
    ElMessageBox.confirm('是否将当前线索转为客户?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            getShop(clueList.value.clueId)
                .then(() => {
                    ElMessage.success('线索已转为商机');
                    handleCancel();
                })
                .catch(() => {
                    ElMessage.info('取消转为商机');
                });
        })
        .catch(() => {
            ElMessage.info('取消删除');
        });
};

const handleVoidConfirm = async (formEl: FormInstance | undefined) => {
    console.log(123);

    if (!formEl) return;
    formEl.validate(valid => {
        if (valid) {
            console.log(form.value.reason);

            const record = `${form.value.reason}：${form.value.remark}`;
            clueList.value.record = record;
            console.log(clueList.value.record);

            getClueVoid(clueList.value).then(res => {
                console.log(res);
                ElMessage.success('线索已无效');
                dialogFormVisible.value = false;
                handleCancel();
            });
        } else {
            console.log('error submit!');
        }
    });
};

// const handleVoidConfirm = () => {

// };

const handleVoid = () => {
    dialogFormVisible.value = true;
    form.value.reason = '';
    form.value.remark = '';
    getClueVoidStatus().then(res => {
        console.log(res.data);
        voidStatus.value = res.data.map(item => {
            return {
                value: item.dictValue,
                label: item.dictLabel,
            };
        });
        console.log(voidStatus.value);
    });
};
const handleCancel = () => {
    useTagsViewStore().delView(route);
    window.history.go(-1);
};
const handleSubmit = () => {
    getClueFollow(clueList.value).then(res => {
        console.log(res);
        ElMessage.success('线索跟进成功');
        handleCancel();
    });
};
watch(
    () => clueList.value,
    () => {
        if (clueList.value.gender !== 1 && clueList.value.gender !== 0) {
            clueList.value.gender.label = '未知';
        }
    }
);

onMounted(() => {
    console.log(route.query.id);
    // id.value = route.params.channelId;
    getDetail();
    getRecord();
});
</script>
<style scoped lang="scss">
.contain {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        width: 78%;

        .clue {
            margin: 20px 0;
            box-shadow: 0 0 10px #ccc;

            .clue-title {
                width: 100%;
                border-bottom: 1px solid #ccc;
                padding: 10px;
                font-size: 16px;
            }

            .clue-cont {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .clue-content {
                    margin: 20px 10px;
                    width: 30%;
                    display: flex;
                    flex-direction: column;

                    .title {
                        color: #000;
                        font-weight: bold;
                        font-style: italic;
                        font-size: 14px;
                    }

                    .info {
                        color: #ccc;
                        font-size: 14px;
                    }
                }

                .btn {
                    margin-right: 8%;

                    button {
                        font-size: 14px;
                    }
                }
            }
        }

        .clue-follow {
            box-shadow: 0 0 10px #ccc;
            margin: 20px 0;

            .clue-title {
                width: 100%;
                border-bottom: 1px solid #ccc;
                padding: 10px;
                font-size: 16px;
            }

            .clue-cont {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .clue-content {
                    margin: 20px 10px;
                    width: 30%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title {
                        color: #000;
                        font-weight: bold;
                        font-style: italic;
                        font-size: 14px;
                    }

                    input {
                        padding-left: 10px;
                    }
                }

                .btn {
                    width: 100%;
                    display: flex;
                    justify-content: end;
                    margin-right: 10px;
                }
            }
        }
    }

    .right {
        width: 20%;
        box-shadow: 0 0 10px #ccc;
        margin: 20px 0;
        height: 100%;

        .title {
            width: 100%;
            padding: 10px 5px;
            border-bottom: 1px solid #ccc;
        }

        .record-content {
            display: flex;

            text {
                font-size: 14px;
            }

            .title {
                color: #000;
                font-weight: bold;
                font-style: italic;
                font-size: 14px;
                margin: 0;
                padding: 0;
            }
        }

        p {
            color: #ccc;
            font-size: 12px;
        }
    }

    .void-reason {
        margin: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .void-remark {
        margin: 40px 10px;
        display: flex;
        justify-content: space-between;
    }

    .void-btn {
        width: 100%;
        display: flex;
        justify-content: end;
    }
}
</style>
